<template>
    <view>
        <!-- <back></back> -->
        <mescroll-body
            :sticky="true"
            ref="mescrollRef"
            @init="mescrollInit"
            @down="downCallback"
            @up="upCallback"
        >
            <view class="five">
                <view class="five_item" v-for="item in flowList">
                    <view class="five_in u-flex u-row-between">
                        <view class="u-flex">
                            <image :src="item.user.avatar" mode="aspectFill"></image>
                            <view>
                                <view class="fiv_tit">{{ item.user.nickname }}</view>
                                <!-- <view class="fiv_num">12/15</view> -->
                            </view>
                        </view>
                        <u-rate :count="count" v-model="item.score"></u-rate>
                        <!-- <view class="fiv_btn u-flex-center">回复</view> -->
                    </view>
                    <view class="gui">规格：{{ item.suk }}</view>
                    <view class="fiv_cont" v-html="item.content"></view>
                    <view class="u-flex u-flex-wrap">
                        <view
                            class="fen_pho u-flex-center"
                            @click="yu(it, ind)"
                            v-for="(it, ind) in item.images"
                        >
                            <image :src="it" class="img_tu" mode="w"></image>
                        </view>
                    </view>
                </view>
            </view>
        </mescroll-body>
    </view>
</template>

<script>
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
export default {
    mixins: [MescrollMixin], // 使用mixin
    data() {
        return {
            id: "",
            flowList: [],
            count: 5,
            value: 2,
        };
    },
    onLoad(options) {
        this.id = options.id;
    },
    methods: {
        upCallback(page) {
            this.mescroll.optDown.use = false;
            this.mescroll.optUp.textNoMore = "- 已经到底啦 -";
            this.$u
                .post("/api/wanlshop/product/comment", {
                    page: page.num,
                    limit: page.size,
                    id: this.id,
                })
                .then((res) => {
                    this.mescroll.endBySize(res.data.comment.data.length, res.data.comment.total);
                    if (page.num == 1) this.flowList = []; //如果是第一页需手动制空列表
                    this.flowList = this.flowList.concat(res.data.comment.data); //追加新数据
                })
                .catch(() => {
                    //联网失败, 结束加载
                    this.mescroll.endErr();
                });
        },
        yu(it, ind) {
            // 预览图片
            let imgsArray = [];
            imgsArray.push(it);
            uni.previewImage({
                current: ind,
                urls: imgsArray,
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.five {
    .five_item {
        padding: 0 20rpx;
        background: #fff;
        margin-top: 20rpx;
    }

    .five_in {
        padding: 20rpx 0;
        margin-top: 10rpx;

        image {
            width: 80rpx;
            height: 80rpx;
            border-radius: 50%;
            margin-right: 20rpx;
        }

        .fiv_tit {
            font-size: 28rpx;
            font-weight: bold;
            color: #333;
        }

        .fiv_num {
            font-size: 24rpx;
            color: #333;
            margin-top: 7rpx;
        }

        .fiv_btn {
            width: 104rpx;
            height: 40rpx;
            font-size: 20rpx;
            font-weight: bold;
            color: #fff;
            border-radius: 20rpx;
            background: linear-gradient(to right, #2bb984, #8cd994);
        }
    }

    .gui {
        color: #aaa;
        font-size: 26rpx;
    }

    .fiv_cont {
        font-size: 28rpx;
        color: #333333;
        padding-bottom: 20rpx;
    }

    .fen_pho {
        width: 168rpx;
        height: 168rpx;
        border-radius: 20rpx;
        overflow: hidden;
        margin-right: 28rpx;
        margin-bottom: 28rpx;

        .img_tu {
            width: 100%;
            height: 100%;
        }
    }
}
</style>
